<template>
	<view class="wp">
		<text class="tips">上传我的二维码，自己直推好友可以看到</text>
		<text class="more" @click="$navTo('/pages/user/SetGroupcode')">去上传 ></text>
		<view class="image" v-if="url" >
			<view class="titel">上级二维码</view>
			<image class="image1" show-menu-by-longpress="true" :src="url" mode="widthFix"></image>
			<!-- <image class="image1" show-menu-by-longpress="true" src="http://i.bkyh.top/images/9/2023/06/Uw53WpQqeAZqwqLkw5KsAP9qLQ7l9N.png"></image> -->
			 <!-- @longpress="saveImage" -->
			<view class="titel1">长按识别二维码</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
			}
		},
		onShow() {
			this.getUrl();
		},
		methods: {
			getUrl() {
				this.$axios('chatqr/mains', 'POST', 'member').then(res => {
					if (res.data.code == 200) {
						this.url = res.data.data.qrurl;
					}
				})
			},
			saveImage() {
				uni.showLoading({
					title: '保存中'
				});
				uni.downloadFile({
					url: this.url,
					success(res) {
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										title: '保存成功'
									})
								},
								complete() {
									uni.hideLoading();
								}
							})
						} else {
							uni.hideLoading();
						}
					},
					fail() {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
	}
	.wp {
		text-align: center;
		padding: 20rpx;
	}
	.tips{
		color: #7f6545;
		float: left;
		margin-top: 15rpx;
	}
	.more{
		color: #7f6545;
		float: right;
		margin-top: 15rpx;
		font-weight: bold;
	}
	.image{
		margin-top: 100rpx;
		text-align: center;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border-radius: 20upx;
		flex-wrap: wrap;
		justify-content: center;
		padding: 20rpx;
		box-shadow: 9rpx 17rpx 29rpx 13rpx #ddd;
		.image1{
			padding: 20rpx;
			text-align: center;
			width: 640rpx;
		}
		.titel{
			color: #000;
			font-size: 32rpx;
			font-weight: bold;
			text-align: left;
			padding: 10rpx 0rpx 20rpx 20rpx;
			margin: 20rpx 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px hsl(0, 0%, 87%) solid;
		}
		.titel1{
			font: 28rpx;
			color: #888;
			margin: 20rpx;
		}
		// image{
		// 	margin: 10rpx;
		// 	text-align: center;
			
		// }

	}

</style>